<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input
        type="text"
        placeholder="enter the name you search"
        v-model="searchName"
      />
      <button @click="search">Search</button>
    </div>
  </section>
</template>
<script>
import axios from "axios";
export default {
  name: "Search",
  data() {
    return {
      searchName: "",
    };
  },
  methods: {
    async search() {
      const { searchName } = this;
      if (!searchName) {
        alert("搜索内容不能为空哦！");
        return;
      }
      //点击搜索要加载loading....
      this.$bur.$emit("isLoading", true);
      //发送请求
      let re = await axios({
        method: "GET",
        url: "https://api.github.com/search/users",
        params: {
          // querystring参数
          q: searchName,
        },
      });
      //返回的结果不是我们想要的 可以map成我们想要的
      // console.log(re.data.items);
      const users = re.data.items.map((item) => {
        return {
          id: item.id,
          login: item.login,
          html_url: item.html_url,
          avatar_url: item.avatar_url,
        };
      });

      // 触发事件
      // 把loading关了 把users传给list
      // console.log(users);
      this.$bur.$emit("isLoading", false);
      this.$bur.$emit("searchUser", users);
    },
  },
};
</script>